import React, { useEffect, useState } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import style from "./style.module.scss"
const { title } = style
const AMapExample = (props: any) => {
    const [marktitle, setmarktitle] = useState('mark')
    const [marklist, setmarklist] = useState<any>([])
    console.log(props.startpostation,"jjjjjjjjjjjjjjjjjjjjjj");
    
    const createmap = () => {
        AMapLoader.load({
            "key": "	a7c01561d7a5f5f31b8af872d94f5c32",   // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": []  //插件列表
        }).then((AMap) => {
            let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id
                zoom: props.startpostation[0].zoom, //初始化地图层级
                center: props.startpostation[0].postation,//初始化地图中心点
                // icon: ,
            });
            // 标记
            let addresslist: any = props.searchinformation
            for (let a = 0; a < addresslist.length; a++) {
                setmarktitle("mark" + a)
                let marktitle: Array<any> = new AMap.Marker({
                    content: `￥${ addresslist[a].price }`,
                    position: addresslist[a].position,// 基点位置
                    // icon:icon
                });


                marklist.push(marktitle)

            }
            // console.log(marklist, 'tttt');

            // 地图添加标记
            amap.add(marklist);
        }).catch(e => {
            // console.log(e);
        })
    }

    useEffect(() => {
        props.searchinformation.length>0?createmap():console.log(1);
    
    }, [props.searchinformation]);

    return  <div id="mapContainer" style={{ width: '100%', height: '100%' }} className={title}></div>
    ;
};

export default AMapExample;

